import React from 'react';
import { Modal, Form, Slider } from 'antd';
import { updateTaskProgress } from '../../../services';
import styles from './index.less';

const TaskProgress = ({ form, taskProgress }) => {
    const { getFieldDecorator } = form;
    const [progress, setProgress] = React.useState(taskProgress || 0);
    const handleSliderChange = value => {
        setProgress(value);
    };
    return (
        <Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} style={{ marginTop: 24 }}>
            <Form.Item label="当前进度">
                <span
                    style={{
                        position: 'absolute',
                        display: 'block',
                        width: 50,
                        left: 320,
                        color: '#585858'
                    }}
                >
                    {progress}%
                </span>
                {getFieldDecorator('nowProgress', {
                    initialValue: progress
                })(<Slider onChange={handleSliderChange} style={{ width: 300 }} />)}
            </Form.Item>
        </Form>
    );
};

export const showProgressModal = ({ form, taskId, title = '填写进度', taskProgress, onOk }) => {
    Modal.confirm({
        title,
        width: 640,
        content: <TaskProgress form={form} taskProgress={taskProgress} />,
        className: styles.confirmModal,
        onOk: () =>
            new Promise((resolve, reject) => {
                const { nowProgress } = form.getFieldsValue();
                updateTaskProgress({
                    taskId,
                    taskProgress: nowProgress
                })
                    .then(res => {
                        const { code } = res;
                        if (code === 10000) {
                            if (onOk) onOk();
                            resolve();
                        } else {
                            reject();
                        }
                    })
                    .catch(() => {
                        reject();
                    });
            })
    });
};
